<template>
	<!-- 年度计划 -->
	<div class="tobeDone">
		<div class="title d-flex m-b20">
			<div class="left">
				计划内投资总额 ： <span>{{ state.planInTotalAmount }}</span
				>万元
			</div>
			<div class="right m-l20">
				计划外投资总额： <span>{{ state.planOutTotalAmount }}</span
				>万元
			</div>
		</div>

		<tableIndex
			:tableData="tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:isSelection="true"
			:isRadio="false"
			:fields="state.fields"
			:height="500"
			ref="tableRef"
			:page="state.page"
			@selectChange="selectChange"
			@searchList="searchList"
			@page-change="pageChange"
			@resetList="resetList"
		>
			<template #right-btn>
				<div style="float: right">
					<el-button size="small" plain class="button_edit" @click="onExport"
						>导出</el-button
					>
				</div>
			</template>
			<template #operate>
				<el-table-column label="操作" min-width="120" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							class="button_view"
							type="primary"
							@click="viewHandel(row)"
							>查看</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>
	</div>
</template>

<script setup>
import TableIndex from "@/components/table/index.vue";
import { exportExcelFile } from "@/common/utils/GlobalUtils";
import { annualApi } from "@/api/investment";
import { ref, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
let Router = useRouter();
let route = useRoute();

const state = reactive({
	planOutTotalAmount: 0,
	planInTotalAmount: 0,
	page: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	fields: [{ key: "year", label: "年度", type: "year" }],
});
// const info = ref(null)
const tableData = ref([]);
const tableHead = ref([
	{
		prop: "year",
		label: "年度",
		formatter: (row) => {
			return row.year + "年";
    },
    minWidth: 80,
	},
	{
		prop: "projectNum",
    label: "项目总数",
    minWidth: 100,
	},
	{
		prop: "planInvestAmount",
    label: "计划投资总额",
    minWidth: 120
	},
	{
		prop: "executedAmount",
    label: "已执行金额",
    minWidth: 100,
	},
	{
		prop: "completionRate",
		label: "完成率", // 已执行金额/计划投资总额
		formatter: (row) => {
			return ((row.executedAmount / row.planInvestAmount)*100).toFixed(2) + '%';
		},
		minWidth: 80,
	},
	{
		prop: "planOutNum",
    label: "计划外项目数",
    minWidth: 120
	},
	{
		prop: "planOutAmount",
    label: "计划外投资总额",
    minWidth: 130
	},
]);

const viewHandel = (row) => {
	Router.push({
		path: `/investmentProjectManagement/annualPlanManagement/annualPlanDetails/planInvestAmount=${row.planInvestAmount}&projectNum=${row.projectNum}&year=${row.year}`,
	});
};

//搜索接口请求
const searchList = (e) => {
	getPage(e);
};

const resetList = (e) => {
	getPage();
};

//分页变化
const pageChange = (e) => {
	state.page.page = e.page;
	state.page.pageSize = e.limit;
	getPage();
};

const getPage = (e) => {
	let obj = {
		pageNum: state.page.page,
		pageSize: state.page.pageSize,
		param: {
			...e,
		},
	};
	annualApi.getManagePage(obj).then((res) => {
		if (res.code == "200") {
			tableData.value = res.data.content;
			state.page.total = res.data.totalSize;
		}
	});
};

const tableRef = ref(null);
const onExport = () => {
	const obj = {
		projectTypeId: "",
		keyword: "",
		year: tableRef.value.getSearchData().year || "",
	};
	annualApi.export(obj).then((res) => {
		exportExcelFile(res, "年度计划");
	});
};

const getTotal = (param) => {
	annualApi.getTotal(param).then((res) => {
		if (res.code == 200) {
			state.planOutTotalAmount = res.data.planOutTotalAmount;
			state.planInTotalAmount = res.data.planInTotalAmount;
		}
	});
};

onMounted(() => {
	getPage();
	getTotal({});
});
</script>

<style lang="scss" scoped>
.tobeDone {
	width: 100%;
	height: 100%;
}
</style>
